<template>
	<div>
		<el-container>
			<el-aside :width="global.left+'px'" :style="{lineHeight:global.top+'px',fontSize:25+'px',paddingLeft:20+'px'}">
				<span v-if="global.isCollapse==true">
							<i class="iconfont icon-ku" style="font-size: 30px;"></i>
						</span>
				<span v-else>
							狼少RBAC
						</span>
			</el-aside>
			<el-main>
				<el-row>
					<el-col :span="12">
						<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" :backgroundColor="global.bgColor" text-color="#fff" active-text-color="#ffd04b">
							<el-menu-item index="1"> <i style="font-size: 25px;color: #fff;" :class="['iconfont',shouqi]"></i> </el-menu-item>
							<el-menu-item index="2">系统介绍</el-menu-item>
							<el-menu-item index="3">项目</el-menu-item>
							<el-menu-item index="4">文档</el-menu-item>
							<el-menu-item index="5">博客</el-menu-item>
						</el-menu>
					</el-col>
					<el-col :span="12" class="right">
						<el-menu :default-active="ractiveIndex" class="el-menu-demo" mode="horizontal" @select="rhandleSelect" :backgroundColor="global.bgColor" text-color="#fff" active-text-color="#ffd04b">
							<el-menu-item index="1">
								<el-badge :value="4" :max="99" style="line-height: 20px;">
									<i style="color: #fff;font-size: 25px;" class="iconfont icon-tixing"></i>
								</el-badge>
							</el-menu-item>
							<el-menu-item index="2" style="padding-right: 20px;">
								<el-popover placement="bottom" width="300" popper-class="abc" trigger="click" :visible-arrow="false">
									<UserInfo :global="global" />
									<div slot="reference">
										{{username}}
										<img src="../../build/logo.png" height="40px" style="border:1px solid #fff;border-radius: 10px;" />
									</div>
								</el-popover>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	import UserInfo from "./System/UserInfo"
	export default {
		components: {
			UserInfo
		},
		props: ["global"],
		data() {
			return {
				activeIndex: '2',
				shouqi: "icon-shouqi",
				ractiveIndex: "0",
				username: "admin"
			}
		},
		methods: {
			handleSelect: function(key, keyPath) {
				//第一个元素是用来控制展开和关闭左侧菜单的
				if(key == 1) {
					//改变样式图标
					if(this.shouqi == "icon-shouqi") {
						this.shouqi = "icon-zhankai";
						this.global.isCollapse = true;
						this.global.left = 80;
						this.$emit("headercollapse", {
							collapse: this.global.isCollapse,
							left: this.global.left
						})
					} else {
						this.shouqi = "icon-shouqi";
						this.global.isCollapse = false;
						this.global.left = 250;
						this.$emit("headercollapse", {
							collapse: this.global.isCollapse,
							left: this.global.left
						})
					}
				}
			},
			rhandleSelect: function(key, keyPath) {}
		}
	}
</script>

<style>
	.right {
		display: flex;
		justify-content: flex-end;
	}

	.el-aside {
		border-right: 1px solid #E4E7ED;
	}

	.abc {
		background: #409EFF;
	}
</style>
